<!-- ？？？ -->


<!--学生考试首页-->

<template>

  <div id="student">
    <el-row class="padding-50">
      <el-col :span="24">
        <ul class="list">
          <img src="@/assets/033.png" style="
                            width: 35px;
                            height: 35px;
                            margin: 13px -15px 0 10px;
                            -webkit-user-drag: none;
                            -khtml-user-drag: none;
                            -moz-user-drag: none;
                            user-drag: none;
                        "/>

          <li class="logo"><span>太阳金辉教学系统</span></li>
          <li>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                     @select="handleSelect">

              <!-- <el-submenu index="1">
                  <template slot="title">考试与练习</template>
                  <el-menu-item index="1-1" @click="exam()">考试中心</el-menu-item>
                  <el-menu-item index="1-2" @click="practice()">练习中心</el-menu-item>
                  -->
              <el-submenu index="1">
                <template slot="title">单点学习</template>
                <el-menu-item index="1-1">
                  <router-link to="/Echarts" class="submenu-link">地理知识图谱</router-link>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">综合性训练</template>
                <el-menu-item index="2-1">
                  <router-link to="/aiQuestion" class="submenu-link">AI智能出题</router-link>
                </el-menu-item>
                <el-menu-item index="2-2">
                  <router-link to="/chaQuestion" class="submenu-link">浏览简答题</router-link>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">工具栏</template>
                <el-menu-item index="3-1">
                  <router-link to="/textCt" class="submenu-link">文本纠错</router-link>
                </el-menu-item>
                <el-menu-item index="3-2">
                  <router-link to="/textRewriting" class="submenu-link">文本改写</router-link>
                </el-menu-item>
                <el-menu-item index="3-3">
                  <router-link to="/ppt" class="submenu-link">ppt生成</router-link>
                </el-menu-item>
                <el-menu-item index="3-4">
                  <router-link to="/diary" class="submenu-link">日志中心</router-link>
                </el-menu-item>
                <br>
              </el-submenu>
              <!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
            </el-menu>
          </li>
          <li class="right" @mouseenter="flag = !flag" @mouseleave="flag = !flag">
            <el-row>
              <el-col :span="12">
                <el-avatar shape="square" :size="50" :src="require('@/assets/img/avatar.jpg')"
                           style="margin: 5px 5px 0 0"></el-avatar>
              </el-col>
              <el-col :span="12">
                <a href="javascript:;" style="font-size: 15px; font-weight: 400"><i
                    class="iconfont icon-Userselect icon"></i>{{ user.userName }}</a>
                <div class="msg" v-if="flag">
                  <p @click="manage()">修改密码</p>
                  <p class="exit" @click="exit()">退出</p>
                </div>
              </el-col>
            </el-row>
          </li>
        </ul>
      </el-col>
    </el-row>

    <!--路由区域-->
    <div class="main">
      <router-view></router-view>
    </div>
    <v-footer></v-footer>
  </div>

</template>

<script>

import myFooter from "@/components/student/myFooter";
import {mapState} from "vuex";

export default {
  components: {
    "v-footer": myFooter,
  },
  data() {
    return {
      flag: false,
      user: {},
      submenuVisible: false, // 控制下拉菜单的可见性
    };

  },
  created() {
    this.userInfo();
  },
  methods: {
    showSubmenu() {
      this.submenuVisible = true; // 当鼠标悬停时，显示下拉菜单
    },
    hideSubmenu() {
      this.submenuVisible = false; // 当鼠标移开时，隐藏下拉菜单
    },
    butt() {
      this.initUrl('数组去重的方法有哪些？').then((result) => {
        console.log('Result:', result);
      }).catch((err) => {
        console.error('Error:', err);
      });
    },
    initUrl() {
      return new Promise((resolve, reject) => {
        // 初始化问题值为空字符串
        let questionValue = '';

        // 引入加密和 WebSocket 模块
        const crypto = require('crypto');

        // 获取当前时间的 GMT 字符串
        const dateString = new Date().toGMTString();

        // 定义星火 API 的主机和路径
        const host = 'spark-api.xf-yun.com';
        const path = '/v3.5/chat';

        // 构建用于签名的请求头
        let tmp = `host: ${host}\ndate: ${dateString}\nGET ${path} HTTP/1.1`;

        const APISecret = "YjQ1MmMxNmZhNTNjNDYxZmViODU2YjZm";  // 星火 APISecret 这里直接填入你自己的APISecret即可 格式如：ZjAafHbiODRdMjiyamM1azc3Yju1gMy1
        let signature = crypto
            .createHmac('sha256', APISecret)
            .update(tmp)
            .digest('base64');

        const APIKey = "1312f81a1b7cf9d87cc52605326be9f0";  // 星火 APIKey 这里直接填入你自己的APISecret即可 格式如：4220a1b1881d40e8d70eb23fd1225cd1
        const authorization_origin = `api_key="${APIKey}", algorithm="hmac-sha256", headers="host date request-line", signature="${signature}"`;

        // 将授权信息编码为 Base64 格式
        let buff = Buffer.from(authorization_origin);
        const authorization = buff.toString('base64');

        // 构建访问星火 API 的 WebSocket URL
        const signUrl = `wss://${host}${path}?authorization=${authorization}&date=${encodeURIComponent(dateString)}&host=${host}`;

        // 创建 WebSocket 连接
        let ws = new WebSocket(signUrl);

        // 当连接打开时发送聊天请求
        ws.onopen = function () {
          console.log('讯飞星火连接sock连接成功!!!!');
          ws.send(
              JSON.stringify({
                header: {
                  app_id: "83f52498",  // 星火应用程序 ID  APPID 格式为 dbfab529
                },
                parameter: {
                  chat: {
                    domain: 'generalv3.5',
                    temperature: 0.5,
                    max_tokens: 1024,
                  },
                },
                payload: {
                  message: {
                    text: [
                      {
                        role: 'user',
                        content: 'js中数组去重的方法有哪些？',
                      },
                    ],
                  },
                },
              })
          );
        };

        // 监听连接的错误事件
        ws.onerror = function (err) {
          console.log('error: ', err);
          reject(err);
        };

        // 监听消息事件，处理 API 响应
        ws.onmessage = function (event) {
          // 解析 API 响应的 JSON 数据
          const obj = JSON.parse(event.data);
          // 提取文本消息
          const texts = obj.payload.choices.text;

          // 将文本消息拼接到问题值中
          texts.forEach((item) => {
            questionValue += item.content;
          });
          // console.log(questionValue);
        };

        // 监听连接关闭事件，将结果通过 resolve 返回
        ws.onclose = function () {
          resolve(questionValue);
        };
      });
    },
    exit() {
      //退出登录
      this.$router.push({path: "/"}); //跳转到登录页面
      this.$cookies.remove("cname"); //清除cookie
      this.$cookies.remove("cid");
      this.$cookies.remove("rb_token"); //清除cookie
      this.$cookies.remove("rb_role");
    },
    manage() {
      //跳转到修改密码页面
      this.$router.push({path: "/manager"});
    },
    userInfo() {
      let studentName = this.$cookies.get("cname");
      let studentId = this.$cookies.get("cid");
      console.log(`studentId${studentId}`);
      console.log(`studentName ${studentName}`);
      this.user.userName = studentName;
      this.user.studentId = studentId;
    },
    practice() {
      //跳转练习模式
      let isPractice = true;
      this.$store.commit("practice", isPractice);
      this.$router.push({path: "/startExam"});
    },
    exam() {
      //跳转考试模式
      let isPractice = false;
      this.$store.commit("practice", isPractice);
      this.$router.push({path: "/student"});
    },
  },
  computed: mapState(["isPractice"]),
};
</script>

<style scoped>
.submenu-link {
  font-family: "宋体", sans-serif;
  /* 设置字体为宋体 */
  color: hsl(0, 1%, 28%);
  /* 设置颜色为白色 */
  text-align: center;
  /* 文本居中 */
  display: flex;
  /* 使用 Flex 布局 */
  align-items: center;
  /* 垂直居中 */
  margin-bottom: 5px;
  /* 将文本往上移动 */
}


.right .icon {
  margin-right: 6px;
}

#student .padding-50 {
  margin: 0 auto;
  padding: 0 50px;
  box-shadow: 0 0 10px 4px rgba(1, 149, 255, 0.1);
  background-color: #fff;
}

.list a {
  text-decoration: none;
  color: #334046;
  font-size: 18px;
}

li {
  list-style: none;
  height: 60px;
  line-height: 60px;
}

#student .list {
  display: flex;
}

#student .list li {
  padding: 0 20px;
  cursor: pointer;
}

#student .list li:hover {
  background-color: #f2f6f8;
  transition: all 2s ease;
}

#student .list li:hover a {
  color: #fff;
}

#student .list .right {
  margin-left: auto;
  position: relative;
}

#student .list li.right :hover a {
  color: #000;
}

#student .list .logo {
  display: flex;
  font-weight: bold;
  color: black;
  font-size: 28px;
}

#student .list .logo i {
  font-size: 50px;
}

.right .msg {
  text-align: center;
  position: absolute;
  top: 60px;
  left: 0px;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  border-bottom: 3px solid #0195ff;
  background-color: #fff;
}

.right .msg p {
  height: 40px;
  line-height: 40px;
  width: 105px;
}

.right .msg p:hover {
  background-color: #0195ff;
}
</style>
